<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="img/company-2.png" id="lamp"/>
		<canvas id="canvas" width="600" height="600">
			
		</canvas>
		<button type="button" onclick="" id="btn1">x重复</button>
		<button type="button" onclick="" id="btn2">y重复</button>
		<button type="button" onclick="" id="btn3">x-y重复</button>
		<button type="button" onclick="" id="btn4">clear重复</button>
	</body>
	<script type="text/javascript">
		function draw(direction){
			var canvas = document.getElementById("canvas");
			if(canvas.getContext){
				context = canvas.getContext("2d");
				context.clearRect(0,0,canvas.width,canvas.height);
				img = document.getElementById("lamp");
				var pattern = context.createPattern(img,direction);
				context.fillStyle = pattern;
				context.fillRect(0,0,600,300);
			}
			
		}
		document.getElementById("btn1").onclick = function(){
			draw("repeat-x");
		}
		document.getElementById("btn2").onclick = function(){
			draw("repeat-y");
		}
		document.getElementById("btn3").onclick = function(){
			draw("repeat");
		}
		document.getElementById("btn4").onclick = function(){
			draw("no-repeat");
		}
	</script>
</html>
